<template>
  <div class="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-50 p-6">
    <div class="max-w-7xl mx-auto">
      <div class="bg-white/80 backdrop-blur-lg rounded-xl shadow-xl p-6">
        <!-- Header -->
        <div class="flex justify-between items-center mb-6">
          <div class="flex items-center gap-4">
            <button 
              @click="router.back()" 
              class="p-2 rounded-lg hover:bg-gray-100"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
              </svg>
            </button>
            <h1 class="text-2xl font-semibold text-gray-800">文档详情</h1>
          </div>
        </div>

        <!-- Loading State -->
        <div v-if="loading" class="flex justify-center items-center py-12">
          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500"></div>
        </div>

        <!-- Document Content -->
        <div v-else-if="document" class="space-y-6">
          <!-- Title -->
          <div class="border-b pb-4">
            <h2 class="text-xl font-medium text-gray-800">{{ document.title }}</h2>
            <div class="mt-2 flex items-center gap-4 text-sm text-gray-500">
              <span>创建时间: {{ new Date(document.created_at).toLocaleString() }}</span>
              <span>更新时间: {{ new Date(document.updated_at).toLocaleString() }}</span>
            </div>
          </div>

          <!-- Status -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="p-4 bg-white rounded-lg shadow">
              <div class="text-sm text-gray-500 mb-1">进度</div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div 
                  class="bg-purple-500 h-2 rounded-full" 
                  :style="{ width: `${(document.process / 100) * 100}%` }"
                ></div>
              </div>
            </div>
            <div class="p-4 bg-white rounded-lg shadow">
              <div class="text-sm text-gray-500 mb-1">校对步骤</div>
              <span 
                class="px-3 py-1 rounded-full text-sm"
                :class="{
                  'bg-gray-100 text-gray-600': document.step === 0,
                  'bg-blue-100 text-blue-600': document.step === 1,
                  'bg-purple-100 text-purple-600': document.step === 2,
                  'bg-green-100 text-green-600': document.step === 3,
                }"
              >
                {{ getStepText(document.step) }}
              </span>
            </div>
            <div class="p-4 bg-white rounded-lg shadow">
              <div class="text-sm text-gray-500 mb-1">锁定状态</div>
              <span v-if="document.is_lock" class="text-red-500 flex items-center gap-1">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
                {{ document.locked_user_name }}
              </span>
              <span v-else class="text-green-500">未锁定</span>
            </div>
          </div>

          <!-- Content -->
          <div class="space-y-6">
            <div v-if="document.origin" class="bg-white rounded-lg shadow p-4">
              <h3 class="text-lg font-medium text-gray-800 mb-2">原文</h3>
              <div class="whitespace-pre-wrap text-gray-600">{{ document.origin }}</div>
            </div>
            
            <div v-if="document.first_check" class="bg-white rounded-lg shadow p-4">
              <h3 class="text-lg font-medium text-gray-800 mb-2">第一次校对</h3>
              <div class="whitespace-pre-wrap text-gray-600">{{ document.first_check }}</div>
            </div>

            <div v-if="document.second_check" class="bg-white rounded-lg shadow p-4">
              <h3 class="text-lg font-medium text-gray-800 mb-2">第二次校对</h3>
              <div class="whitespace-pre-wrap text-gray-600">{{ document.second_check }}</div>
            </div>

            <div v-if="document.third_check" class="bg-white rounded-lg shadow p-4">
              <h3 class="text-lg font-medium text-gray-800 mb-2">第三次校对</h3>
              <div class="whitespace-pre-wrap text-gray-600">{{ document.third_check }}</div>
            </div>
          </div>
        </div>

        <!-- Error State -->
        <div v-else class="text-center py-12 text-gray-500">
          文档不存在或已被删除
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import request from '../utils/request'

const router = useRouter()
const route = useRoute()
const document = ref(null)
const loading = ref(false)

const getStepText = (step) => {
  const steps = {
    0: '未开始',
    1: '第一次校对',
    2: '第二次校对',
    3: '第三次校对'
  }
  return steps[step] || '未知状态'
}

const fetchDocument = async () => {
  loading.value = true
  try {
    const result = await request.get(`/documents/${route.params.id}`)
    if (result.code === 200) {
      document.value = result.data
    }
  } catch (error) {
    console.error('获取文档详情失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchDocument()
})
</script> 